<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<style>
	#main
	{
		margin: 50px;
	}
	button
	{
		opacity: 0.7;
	}
	#left_div
	{
		margin: 10px;
		float: left;
		width: 20%;
	}
	#right_div
	{
		margin: 10px 40px 0px 40px;
		float: right;
		width: 70%;
        text-align: center;
	}
    .alert-info{
        margin-right: 30px;
        width:1100px;
        height:60px;
    }
	#list
	{
		/* border:turquoise 2px solid; */
	}
    .com{
        float: left;
        width: 1000px;
        height: 100px;
        margin: 20px;
        animation:fadeInRight;
        animation-duration: 1s;
    }
    .portfolio img{
        width:60px;
        height:60px;
        float: left;
        margin: 20px;
    }
    .img_com img{
        width:100px;
        height:110px;
        float: left;
        border: 1px solid black;
        border-radius: 0px 15px 15px 0px;
    }
    .message2 {
        float:left;
        width: 760px;
        height: 110px;
        background-color: #561413;
        border-bottom-color: #561413;
        /*为了给after伪元素自动继承*/
        color: #fff;
        font-size: 12px;
        line-height: 18px;
        padding: 5px 12px 5px 12px;
        box-sizing: border-box;
        border-radius: 15px 0px 0px 15px;
        position: relative;
        word-break: break-all;
        text-align: left;
    }

    .message2::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -5px;
    width: 10px;
    height: 10px;
    margin-top: -10px;
    background: inherit;
    /*自动继承父元素的背景*/
    transform: rotate(45deg);
    }
    .form-group{
        text-align: left;
    }
</style>

<body>
{% include 'head.html' %}
  <!--假的导航栏-->
  <div id="left_div">
  <br><br><br><br><br><br><br><br><br><br>
    <div id="list">
  <ul class="nav nav-pills nav-stacked" >
    <li role="presentation" class="active"><a href="##"><font size="3">图书评价</font></a></li>
    <li role="presentation" ><a href="##"><font size="3">环境评价</font></a></li>
    <li role="presentation" class="active"><a href="##"><font size="3">问题反馈</font></a></li>
    <li role="presentation"><a href="##"><font size="3">常见问题</font></a></li>
    <li role="presentation" class="active"><a href="##"><font size="3">我要留言</font></a></li>
    <li role="presentation"><a href="##"><font size="3">投诉和反馈</font></a></li>
    <li role="presentation" class="active"><a href="##"><font size="3">建议和质疑</font></a></li>
    <li role="presentation"><a href="##"><font size="3">写信给馆长</font></a></li>
    </ul>
    </div>
  </div>

  <div id="right_div">
    <div class="alert alert-info" role="alert"><font size="5" face="KaiTi">精选留言</font></div>

{% if page_obj %}
    <ul> {% for comment in page_obj %}
<div class="com">

    <div class="portfolio">
        <img src="../../static/portrait/{{ forloop.counter }}.jpg">
    </div>
    <div class="message2">
        <br>
        <font size="4" face="黑体">评论主题:{{ comment.title }} 评论时间:{{ comment.pub_date }}</font><br>
        <br>
        <font size="3" face="黑体">评论内容:{{ comment.comments }}</font><br>
        <br>


    </div>
    <div class="img_com">
        <img src="{{ comment.picture.url }}">
    </div>
</div>
    {% endfor %}
   </ul>
{# 注释: 下面代码一点也不要动 #}
   {% if is_paginated %}
     <ul class="pagination">
    {% if page_obj.has_previous %}
      <li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}">Previous</a></li>
    {% else %}
      <li class="page-item disabled"><span class="page-link">Previous</span></li>
    {% endif %}

    {% for i in paginator.page_range %}
        {% if page_obj.number == i %}
      <li class="page-item active"><span class="page-link"> {{ i }} <span class="sr-only">(current)</span></span></li>
       {% else %}
        <li class="page-item"><a class="page-link" href="?page={{ i }}">{{ i }}</a></li>
       {% endif %}
    {% endfor %}

         {% if page_obj.has_next %}
      <li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}">Next</a></li>
    {% else %}
      <li class="page-item disabled"><span class="page-link">Next</span></li>
    {% endif %}
    </ul>
    {% endif %}

{% else %}
    <p>No comment yet</p>
{% endif %}

<!--自己留言-->
<div class="alert alert-info" role="alert"><font size="5" face="KaiTi">留言区</font></div>
<form method = "post" enctype =  "multipart/form-data" onsubmit="return check();">
<div class="form-group">
  <font color="red" size="6">*</font><font size="4" face="SimHei">请输入名字：</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <font color="red" size="6">*</font><font size="4" face="SimHei">请输入学号：</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <font color="red" size="6">*</font><font size="4" face="SimHei">请输入留言标题：</font></br>
  <input type="text" name = "name" required class="form-control" id="name" placeholder="您的名字" style="width: 25%;display: inline;">
  <input type="text" name = "id" required class="form-control" id="id" placeholder="您的学号" style="width: 25%;display: inline;margin: 0px 40px 0px 40px;">
 <input type="text" name = "title" required class="form-control" id="title" placeholder="留言标题" style="width: 40%; display: inline;">
</div>
<div class="form-group">
  <font color="red" size="6">*</font><font size="4" face="SimHei">请输入您的留言：</font>
  <textarea class="form-control" rows="2" placeholder="您的留言" type="text" name = "comment" required id="message"></textarea>
</div>
    <font color="red" size="6">*</font><font size="4" face="SimHei">请选择图片（若不选择则为默认图片）：</font><input type="file" name = "picture" required style="display: inline;">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    <button type="submit" class="btn btn-default btn-lg" >提交</button>
</form>
  </div>
  </div>
{% include 'bottom.html'%}
</body>
</html>